export const TablePageTemplate = `<!-- 模板文件 -->
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import useToggle from '@/hooks/useToggle'
>>dialogImportTemplate<<
// import PublishDataModel from '../../model/index'

// 检索条件
const queryParams = reactive({
  >>queryParamsTemplate<<,

  pageNum: 1,
  pageSize: 15
})

const tableData = ref([]) // 表格数据
const loading = ref(false) // 加载中
const pageTotal = ref(1) // 总页数
const formRef = ref<FormInstance>() // 检索区域实例
// 获取数据
const search = async () => {
  loading.value = true
  // const data = await PublishDataModel.getUpdateList(queryParams)
  // console.log(data)

  // tableData.value = data.data
  // pageTotal.value = data.totalCount
  loading.value = false
}
search()

// 重置
const reset = () => {
  queryParams.pageNum = 1
  queryParams.pageSize = 10
  formRef.value?.resetFields()
  search()
}
// 条件检索
const query = () => {
  queryParams.pageNum = 1
  search()
}
// 页面跳转
const handlePageChange = (page: number) => {
  console.log(page)
  queryParams.pageNum = page
  search()
}

const [toggle, setToggle] = useToggle()
const selectChannel = ref<number | undefined>()
const addChanel = () => {
  selectChannel.value = void 0
  setToggle()
}

const edit = (id: number) => {
  selectChannel.value = id
  setToggle()
}

const deleteChannel = async (row: any) => {
  ElMessage.success('删除成功')
  search()
}

>>dialogScriptTemplate<<
</script>

<template>
  <div class="p-4">
    <!-- Layout--检索区域 -->
    <el-form ref="formRef" class="i-search-form" :model="queryParams">
      >>searchFormTemplate<<

      <div>
        <el-button type="primary" :loading="loading" @click="search"
          >查询</el-button
        >
        <el-button :loading="loading" @click="reset">重置</el-button>
      </div>
    </el-form>
    <el-divider />
    <!-- Layout--工作栏 -->
    <section class="mb-3 flex justify-between">
      <!-- 新增... -->
      <div>
        <el-button :icon="Plus" type="primary" @click="addChanel"
          >新增</el-button
        >
      </div>
      <!-- 导出 下载... -->
      <div>
        <!-- <el-button>导出</el-button> -->
      </div>
    </section>
    <!-- Layout--数据表格 -->
    <el-table :data="tableData" border v-loading="loading">
      >>tableTemplate<<
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="edit(row.id)"
            >编辑</el-button
          >
          <el-popconfirm title="是否删除该渠道" @confirm="deleteChannel(row)">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- Layout--底部，分页... -->
    <footer class="flex justify-center mt-5">
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="pageTotal"
        layout="prev, pager, next,total"
        background
        @current-change="handlePageChange"
      ></el-pagination>
    </footer>
    >>dialogTemplateTemplate<<
  </div>
</template>

<style lang="scss" scoped></style>
`
